<?php
ob_start();
if ($_SERVER['SERVER_NAME']!="localhost") require_once $_SERVER['DOCUMENT_ROOT'].'/config.php';
else require_once "../config.php"; // ignore, for running locally only
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>David Lu's sky - Blog</title>
<? include INCPATH."html_start_blog.php"; ?><!--include any javascript,css file-->
<LINK rel=stylesheet href="<?=WEBROOT?>css/blog.css">
<LINK rel=stylesheet href="<?=WEBROOT?>css/full.css">
<SCRIPT type=text/javascript src="<?=LIB?>ajax_blog.js"></SCRIPT>
<SCRIPT type=text/javascript src="<?=LIB?>jquery.scrollTo-1.4.2-min.js"></SCRIPT>
<script type=text/javascript src="<?=LIB?>qianting.js"></script>
<script type="text/javascript">
//onload ready jquery goes here
	function small() {
		$('#nav').css('position','absolute');
		$('#nav').css('top','190px');
		$('#nav').css('left','-25px');
		$('#latest').css('position','absolute');
		$('#latest').css('top','190px');
		$('#latest').css('right','-30px');
	}
	function al() { alert('<?=$bid?>'); }
	$(document).ready(function() {
	// do onload stuff here
	$('.scroll_link').click(function() {
		href = $(this).attr('href');
		$.scrollTo(href, 500, function() {
			//window.location=href;
		});
		return false;
	});
	
	$('#submit').click(function(){
		$('.name_input').attr('value'," ");
		$('.content_input').attr('value', " ");
		//alert($('.name_input').attr('value'));
	});
	
	$(window).scroll(function() {
		if ($(document).scrollTop() > 270) {
		$('#nav').css('position','fixed');
		$('#nav').css('top','0px');
		$('#nav').css('left','43px');
		$('#nav').css('*left','43px');
		$('#latest').css('position','fixed');
		$('#latest').css('top','0px');
		$('#latest').css('right','37px');
	}  if ($(document).scrollTop() < 270) { small(); }
								})
	$(".hide").toggle(function(){
		var number = $(this).attr('id').substring(4);
     $("#comment"+number).animate({ height: 'show', opacity: 'show' }, 'slow');
   },function(){
	   var number = $(this).attr('id').substring(4);  
	 $("#comment"+number).animate({ height: 'hide', opacity: 'hide' }, 'slow');
   });
})
</script>
<style> 
.post_comment { text-align:left; vertical-align:top;}
#title { margin-left: 350px;}
#title p { font-size:17px;}
.splitter {margin-top: 0px;}
#fin {left: 190px;}
</style>
</head>
<body style="overflow:hidden;">

<?php
$bid = $_GET['bid'];
$pid = $_GET['pid'];
$category = $_GET["category"];
if ($bid == "2") { ?>
	<script>
		al();
	</script>
<? }
include INCPATH."database.php"; //database file
?>
<!--Mouse style-->
<DIV id=dot0 style="VISIBILITY: hidden; WIDTH: 11px; POSITION: absolute; HEIGHT: 11px;overflow:hidden">
<IMG height=11 src="img/ball.gif" width=11>
</DIV>
<DIV id=dot1 style="WIDTH: 11px; POSITION: absolute; HEIGHT: 11px">D</DIV>
<DIV id=dot2 style="WIDTH: 11px; POSITION: absolute; HEIGHT: 11px">A</DIV>
<DIV id=dot3 style="WIDTH: 11px; POSITION: absolute; HEIGHT: 11px">V</DIV>
<DIV id=dot4 style="WIDTH: 11px; POSITION: absolute; HEIGHT: 11px">I</DIV>
<DIV id=dot5 style="WIDTH: 11px; POSITION: absolute; HEIGHT: 11px">D</DIV>
<DIV id=dot6 style="WIDTH: 11px; POSITION: absolute; HEIGHT: 11px"></DIV>
<!--Mouse style ends-->
<DIV id=wrapper><!--wrapper starts-->
 <? include INCPATH."menu.php"; ?>
	<DIV id=site><!--site starts-->
    	<div id="fix">
		<DIV id=title><!--title starts-->
			<H1>我的博客 | David's Blog <img src="<?=WEBROOT?>images/poring/deviling.gif"></H1>
			<? require INCPATH."status.php"; ?>
		</DIV><!-- Title ends, this isn’t part of the plugin, just a control for demo -->
     	<div id="sea" style="position:relative; height:189px;width: 505px;margin-left:-40px;margin-top: -120px">
 <div id="sea_bg" style="background-image:url(images/sea.png); background-repeat:none;height:189px; width: 425px;position: absolute;background-position: 30px 160px;"></div>
    <div id="boat" style="background-image:url(images/boat_bg_final.png); height:189px; width: 425px;position: absolute"></div>
  <div id="cross" style="background-image:url(images/cross2.png);width: 60px;height: 83px;position: absolute;left: 435px;top:10px;"></div>    
 <div id="gang" style="background-image:url(images/gang_full.png); background-position:0px 0px;width: 40px;height: 40px;position: absolute;left: 465px;top:16px;"></div>    
 <div id="la" style="width: 10px;height: 40px;position: absolute;left: 461px;top: 7px;"></div>
 <div id="la2" style="width: 10px;height: 40px;position: absolute;left: 461px;top:55px;"></div>
 <div id="la3" style="width: 30px;height: 20px;position: absolute;left: 430px;top: 42px"></div>
 <div id="la4" style="width: 30px;height: 20px;position: absolute;left: 470px;top: 42px;"></div>
</div>
<?
if (!$category) {
$sql="SELECT count(*) FROM blog_entry";
} else {
$sql="SELECT count(*) FROM blog_entry where category = '".$category."'";
}
$result = mysql_query($sql);
$row = mysql_fetch_row($result);
$icount = $row[0];
$f_count = 1;
while (($icount-10) > 0) {
	$f_count++;
	$icount = $icount-10;
}
?>
		<ul class="splitter" id="splitter"><!--subtitle starts-->
  			<LI style="float:left;margin-left: 50px;">Choose category:
  				<UL>
					<LI class="segment-1<?=$category==NULL?' selected-1':''?>"><A href="index.php">all</A></LI>
    				<LI class="segment-0<?=$category==life?' selected-0':''?>"><A href="http://www.dwheart.com/blog/index.php?category=life">life</A></LI>
    				<LI class="segment-0<?=$category==share?' selected-0':''?>"><A href="http://www.dwheart.com/blog/index.php?category=share">share</A></LI>
    				<LI class="segment-2<?=$category==programming?' selected-2':''?>"><A href="http://www.dwheart.com/blog/index.php?category=programming">programming</A></LI>
				</UL>
			</LI>
            <LI style="float:left;margin-left: 50px;">Choose page:
  				<UL>
                	<? if ($f_count ==1) { ?>
					<LI class="segment-1<?=$pid==1?' selected-1':''?><?=$pid==NULL?' selected-1':''?> segment-2 selected-2"><A href="<?=$category==NULL?'index.php':'index.php?category='.$category?>">1</A></LI>
                    <? } else { ?>
                    <LI class="segment-0<?=$pid==1?' selected-1':''?><?=$pid==NULL?' selected-1':''?>"><A href="<?=$category==NULL?'index.php':'index.php?category='.$category?>">1</A></LI>
                    <? } ?>
                    <?
					if ($f_count > 1) {
					for($i = 2; $i <= $f_count; $i++) { ?>
                    <LI class="segment-0<?=$pid==$i?' selected-2':''?>"><A href="<?=$category==NULL?'index.php?pid='.$i:'index.php?pid='.$i.'&category='.$category?>"><?=$i?></A></LI>
                    <?  } } ?>
                    <? /*
    				<? if($f_count >= 2) { ?>
                    <LI class="segment-2<?=$pid==2?' selected-2':''?>"><A href="<?=$category==NULL?'index.php?pid=2':'index.php?pid=2&category='.$category?>">2</A></LI>
                	<? } ?>
					*/ ?>
				</UL>
			</LI>
            <div class="clear"></div>
    	</ul><!--subtitle ends-->
		<div id="nav"><!--side nav, title of blog entry-->
			<div class="title">Article List</div>
				<div style="padding-left: 15px; background-color:#333333;">
			<?php
				if ($pid) {
				$p_from = ($pid-1)*10 + 1;
				$p_to = $pid*10 - 2;
				if ($category) {
				$sql="SELECT * FROM blog_entry where category = '".$category."' order by date_posted DESC LIMIT ".$p_from.",10";
				} else {
				$sql="SELECT * FROM blog_entry order by date_posted DESC LIMIT ".$p_from.",10";
				}
				} else {
				if ($category) {
				$sql="SELECT * FROM blog_entry where category = '".$category."' order by date_posted DESC LIMIT 0,10";
				} else {
				$sql="SELECT * FROM blog_entry order by date_posted DESC LIMIT 0,10";
				}
				}
				$result = mysql_query($sql);
				//output the response
				while($row = mysql_fetch_array($result))
 						{ ?>
							<p><a class="scroll_link" href="#<?=$row["id"]?>"><?=$row["title"]?></a><br />
                            	<span class="small">posted @ <?=$row["date_posted"]?></span>
                            </p>
						<? } ?>
                 <p style="float: right;margin-right: 10px;"><a class="scroll_link" href="#splitter">top</a></p>
                 <div class="clear"></div>
             </div>
		</div><!--side nav, title of blog entry ends-->
		<DIV class=demo><!-- main blog entry, read the documentation to understand what’s going on here -->
			<?php
			if ($pid) {
				$p_from = ($pid-1)*10 + 1;
				$p_to = $pid*10;
				if ($category) {
				$sql="SELECT * FROM blog_entry where category = '".$category."' order by date_posted DESC LIMIT ".$p_from.",".$p_to;
				} else {
				$sql="SELECT * FROM blog_entry order by date_posted DESC LIMIT ".$p_from.",".$p_to;
				}
				} else {
				if ($category) {
				$sql="SELECT * FROM blog_entry where category = '".$category."' order by date_posted DESC LIMIT 0,10";
				} else {
				$sql="SELECT * FROM blog_entry order by date_posted DESC LIMIT 0,10";
				}
				}
				$result = mysql_query($sql);
				//output the response
				while($row = mysql_fetch_array($result))
 					{ ?>
			<div class="entry" id="<?=$row["id"]?>"><!--display blog entry-->
  				<h4><strong><?=$row["title"]?></strong></h4>
					<?=$row["content"]?>
			</div><!--blog entry ends-->
			<div class="comment_blog" id="<?=$row["category"].$row["id"]?>"><!--display comments-->
			<? $sql="SELECT * FROM comment where type = 'blog' and id = ".$row["id"];
				$result2 = mysql_query($sql); 
				while($row2 = mysql_fetch_array($result2))
 					{ ?>
				<?=$row2["author"]?> said: <br>
				<?=$row2["content"]?><br><br />
			<? } //comments end ?>
			</div><!--comment ends-->
			<div id="loading" style="display:none"></div><!--loading gif for ajax submit-->
            <div id="hide<?=$row["id"]?>" class="hide"><strong style="color:#be4545;">点我留言~~~</strong></div>
			<div class="post_comment" id="comment<?=$row["id"]?>"><!--Post comments-->
    			<table style="width: 730px;">
    				<tr><td colspan="2">Leave your comments here:</td></tr>
    				<tr>
    					<td width="100">Your name:</td>
            			<td><input type="text" name="name<?=$row["id"]?>" id="name<?=$row["id"]?>" style="width:300px" class="name_input"/></td>
        			</tr>
        			<tr>
    					<td width="100">Your comments:</td>
						<td><textarea rows="3" style="width: 300px;" name="content<?=$row["id"]?>" id="content<?=$row["id"]?>" class="content_input"></textarea></td>
        			</tr>
        			<tr>
    					<td width="100"></td><td><input type="image" id="submit" name="submit" value="Post" src="../images/submit_red5.jpg" onClick="submitBlogComments(<?=$row["id"]?>,'<?=$row["category"].$row["id"]?>')" style="float:left; margin-left:268px;" /></td>
        			</tr>
				</table>
			</div><!--Post comments over-->
            <div style="border-bottom:1px solid #CCC;margin-top: 20px;"></div>
			<? } //each entry ends ?>
	</DIV><!-- main blog entry ends-->
	<div id="latest"><!--display recent comments-->
    	<div class="title">Latest Comments</div>
				<div style="padding-left: 15px; background-color:#333333;">
		<?php $sql="SELECT * FROM comment order by date_posted DESC LIMIT 0,10";
		$result = mysql_query($sql);
		//output the response
		echo "<div>";
		while($row = mysql_fetch_array($result))
 			{ ?>
    			<li><?=$row["content"]?> <i>by <?=$row["author"]?></i></li>
		<? } ?>
        		</div>
        </div>
	</div><!--display recent comments ends-->
	<div class="clear"></div>
    </DIV><!--fix ends-->
</DIV><!--site ends-->
</DIV><!--wrapper ends-->

<div id="footer" style="background:#000; height:40px;padding-top: 10px;">
    	<div style="MARGIN: 3px auto; WIDTH: 1200px; color:#be4545;">
        <table style="margin:0px;padding:0px; width: 1200px; background:#000">
        	<tr style="margin:0px;padding:0px;">
            	<Td height="32" style="margin:0px;padding:0px;"><img src="<?=WEBROOT?>images/logo_small_red.png" /></Td>
                <td height="27" valign="middle" style="margin:0px;padding:0px;padding-top: 5px;">&copy;2011 www.dwheart.com powered by David Lu</td>
                <td height="27" valign="middle" align="right" style="margin:0px;padding:0px;padding-top: 5px;"><a href="http://www.dwheart.com">home</a> | <a href="http://www.dwheart.com/story/">story</a> | <a href="http://www.dwheart.com/life/">photo</a>| <a href="http://www.dwheart.com/about/">about</a> | <a href="http://www.dwheart.com/blog/">blog</a></td>
            </tr>
        </table>
        </div>
</div>

<script type="text/javascript">
<!-- hide code 
var nDots = 7;
if (document.all&&window.print)
var Xpos = 0;
var Ypos = 0;

// fixed time step, no relation to real time
var DELTAT = .01;
// size of one spring in pixels
var SEGLEN = 10;
// spring constant, stiffness of springs
var SPRINGK = 10;
// all the physics is bogus, just picked stuff to
// make it look okay
var MASS = 1;
var GRAVITY = 50;
var RESISTANCE = 10;
// stopping criterea to prevent endless jittering
// doesn't work when sitting on bottom since floor
// doesn't push back so acceleration always as big
// as gravity
var STOPVEL = 0.1;
var STOPACC = 0.1;
var DOTSIZE = 11;
// BOUNCE is percent of velocity retained when 
// bouncing off a wall
var BOUNCE = 0.75;

var isNetscape = navigator.appName=="Netscape";

// always on for now, could be played with to
// let dots fall to botton, get thrown, etc.
var followmouse = true;

var dots = new Array();
init();

function init()
{
var i = 0;
for (i = 0; i < nDots; i++) {
dots[i] = new dot(i);
}

if (!isNetscape) {
// I only know how to read the locations of the 
// <LI> items in IE
//skip this for now
// setInitPositions(dots)
}

// set their positions
for (i = 0; i < nDots; i++) {
dots[i].obj.left = dots[i].X;
dots[i].obj.top = dots[i].Y;
}


if (isNetscape) {
// start right away since they are positioned
// at 0, 0
startanimate();
} else {
// let dots sit there for a few seconds
// since they're hiding on the real bullets
setTimeout("startanimate()", 2000);
}
}


function dot(i) 
{
this.X = Xpos;
this.Y = Ypos;
this.dx = 0;
this.dy = 0;
if (isNetscape) { 
this.obj = eval("document.dot" + i);
} else {
this.obj = eval("dot" + i + ".style");
}
}


function startanimate() { 
setInterval("animate()", 20);
}


// This is to line up the bullets with actual LI tags on the page
// Had to add -DOTSIZE to X and 2*DOTSIZE to Y for IE 5, not sure why
// Still doesn't work great
function setInitPositions(dots)
{
// initialize dot positions to be on top 
// of the bullets in the <ul>
var startloc = document.all.tags("LI");
var i = 0;
for (i = 0; i < startloc.length && i < (nDots - 1); i++) {
dots[i+1].X = startloc[i].offsetLeft
startloc[i].offsetParent.offsetLeft - DOTSIZE;
dots[i+1].Y = startloc[i].offsetTop +
startloc[i].offsetParent.offsetTop + 2*DOTSIZE;
}
// put 0th dot above 1st (it is hidden)
dots[0].X = dots[1].X;
dots[0].Y = dots[1].Y - SEGLEN;
}

// just save mouse position for animate() to use
function MoveHandler(e)
{
Xpos = e.pageX;
Ypos = e.pageY; 
return true;
}

// just save mouse position for animate() to use
function MoveHandlerIE() {
Xpos = window.event.x + document.body.scrollLeft;
Ypos = window.event.y + document.body.scrollTop; 
}

if (isNetscape) {
document.captureEvents(Event.MOUSEMOVE);
document.onMouseMove = MoveHandler;
} else {
document.onmousemove = MoveHandlerIE;
}


function vec(X, Y)
{
this.X = X;
this.Y = Y;
}

// adds force in X and Y to spring for dot[i] on dot[j]
function springForce(i, j, spring)
{
var dx = (dots[i].X - dots[j].X);
var dy = (dots[i].Y - dots[j].Y);
var len = Math.sqrt(dx*dx + dy*dy);
if (len > SEGLEN) {
var springF = SPRINGK * (len - SEGLEN);
spring.X += (dx / len) * springF;
spring.Y += (dy / len) * springF;
}
}


function animate() { 
// dots[0] follows the mouse,
// though no dot is drawn there
var start = 0;
if (followmouse) {
dots[0].X = Xpos;
dots[0].Y = Ypos; 
start = 1;
}

for (i = start ; i < nDots; i++ ) {

var spring = new vec(0, 0);
if (i > 0) {
springForce(i-1, i, spring);
}
if (i < (nDots - 1)) {
springForce(i+1, i, spring);
}

// air resisitance/friction
var resist = new vec(-dots[i].dx * RESISTANCE,
-dots[i].dy * RESISTANCE);

// compute new accel, including gravity
var accel = new vec((spring.X + resist.X)/ MASS,
(spring.Y + resist.Y)/ MASS + GRAVITY);

// compute new velocity
dots[i].dx += (DELTAT * accel.X);
dots[i].dy += (DELTAT * accel.Y);

// stop dead so it doesn't jitter when nearly still
if (Math.abs(dots[i].dx) < STOPVEL &&
Math.abs(dots[i].dy) < STOPVEL &&
Math.abs(accel.X) < STOPACC &&
Math.abs(accel.Y) < STOPACC) {
dots[i].dx = 0;
dots[i].dy = 0;
}

// move to new position
dots[i].X += dots[i].dx;
dots[i].Y += dots[i].dy;

// get size of window
var height, width;
if (isNetscape) {
height = window.innerHeight + document.scrollTop;
width = window.innerWidth + document.scrollLeft;
} else { 
height = document.body.clientHeight + document.body.scrollTop;
width = document.body.clientWidth + document.body.scrollLeft;
}

// bounce of 3 walls (leave ceiling open)
if (dots[i].Y >= height - DOTSIZE - 1) {
if (dots[i].dy > 0) {
dots[i].dy = BOUNCE * -dots[i].dy;
}
dots[i].Y = height - DOTSIZE - 1;
}
if (dots[i].X >= width - DOTSIZE) {
if (dots[i].dx > 0) {
dots[i].dx = BOUNCE * -dots[i].dx;
}
dots[i].X = width - DOTSIZE - 1;
}
if (dots[i].X < 0) {
if (dots[i].dx < 0) {
dots[i].dx = BOUNCE * -dots[i].dx;
}
dots[i].X = 0;
}

// move img to new position
dots[i].obj.left = dots[i].X; 
dots[i].obj.top = dots[i].Y; 
}
}

// end code hiding -->
</script>

</body>
</html>